<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :can-fullscreen="false"
    width="80%"
    title="月会员数据汇总"
  >
    <template #footer>
      <a-button @click="closeModal">关闭</a-button>
    </template>
    <div ref="chartRef" :style="{ height, width }"></div>
  </BasicModal>
  </template>
  <script lang="ts" setup>
  import { ref, Ref, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { PropType } from 'vue';
  import { defHttp } from '@/utils/http/axios';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '360px',
    },
  });
  const [registerModal, { closeModal, changeLoading }] =
    useModalInner(async (data) => {
      setTimeout(() => {
        getData()
      }, 1000);
    });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);

  const getData = async () => {
    getInstance()?.showLoading();
    let res = [];
    try {
        res = await defHttp.get({
          url: '/statistic/memberStatistic',
        })
    } finally {
        getInstance()?.hideLoading();
    }
    setOptions(

        {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
          type: 'category',
          boundaryGap: false,
          name: '日期',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
      },
      yAxis: {
          type: 'value',
          name: '人数 (个)',
      },
      series: [
      {
        name: '会员个数',
        data: res
      }]
    })
  };
  const reload = () => {
    getData();
  }
  onMounted(() => {
    reload();
  })
  const handleToDetail = () => {
    router.push({
      name: 'MemberChart',
    })
  }
  defineExpose({
    reload
  });
  </script>
  